<div class="row">
    <div class="col-md-3">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">Routes</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_1">
                    <ul class="nav nav-pills nav-stacked routes" style="margin-top: 5px;">
                        @foreach ($apis as $api)
                            <li class="route-item" data-uri="{{ $api['url'] }}" data-method="{{ $api['method'] }}"
                                data-method-color="{{ $api['color'] }}" data-parameters="{{ $api['parameters'] }}">
                                <a href="#"><b>{{ $api['name'] }}</b>
                                    <div class="pull-right">
                                        <span class="label bg-{{ $api['color'] }}">{{ $api['method'] }}</span>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="box box-info">
            <form class="form-horizontal api-tester-form">
                <div class="box-body">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Request</label>

                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <a class="btn bg-gray btn-flat method">method</a>
                                </span>
                                <input type="text" name="uri" class="form-control uri">
                                <input type="hidden" name="method" class="form-control method">
                                <input type="hidden" name="_token" value="vRtQOOAA5cpNW5d1a8pH6WfMWyb0Rdm9cVcWNBwY">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputUser" class="col-sm-2 control-label">Login as</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputUser" name="user"
                                placeholder="Enter a user id or token to login with specific user.">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Parameters</label>
                        <div class="col-sm-10">
                            <div class="params">
                                <div class="form-inline param-add">   
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="margin-bottom: 0px;">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Send</button>
                        </div>
                    </div>

                </div>

            </form>
        </div>
        <div class="nav-tabs-custom response-tabs hide">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#content" data-toggle="tab">Content</a></li>
                <li><a href="#headers" data-toggle="tab">Headers</a></li>

                <li class="status-label"><span class="label label-default response-status"></span></li>
            </ul>
            <div class="tab-content">

                <div class="active tab-pane" id="content">
                    <div class="form-group">
                        <pre><code class="line-numbers"></code></pre>
                    </div>
                </div>
                <!-- /.tab-pane -->
                <div class="tab-pane" id="cookies">
                    <div class="form-group">
                        <pre><code class="line-numbers"></code></pre>
                    </div>
                </div>

                <div class="tab-pane" id="headers">
                    <div class="form-group">
                        <pre><code class="line-numbers"></code></pre>
                    </div>
                </div>
                <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
        </div>
    </div>
</div>
<template class="param-tpl">
    <div class="form-inline param">
        <div class="form-group">
            <input type="text" name="key[__index__]" class="form-control param-key" style="width: 100px"
                placeholder="Key" />
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="text" name="val[__index__]" class="form-control param-val" style="width: 280px"
                    placeholder="value" />
            </div>
        </div>
        <div class="form-group text-red">
            <i class="fa fa-times-circle param-remove"></i>
        </div>
        <br />
        <div class="form-group param-desc hide">
            <i class="fa fa-info-circle"></i>&nbsp;
            <span class="text"></span>
            <b class="text-red hide param-required">*</b>
        </div>
    </div>
</template>
<script data-exec-on-popstate>
    $(function() {
        $('.route-item a').click(function() {

            var li = $(this).parent('li');
            $('a.method').html(li.data('method')).removeClass(function(index, className) {
                return (className.match(/bg-[^\s]+/) || []).join(' ');
            }).addClass('bg-' + li.data('method-color'));

            $('.uri').val(li.data('uri'));
            $('input.method').val(li.data('method'));
            $('.param').remove();
            $('.response-tabs').addClass('hide');
            appendParameters(li.data('parameters'));
        });

        function getParamCount() {
            return $('.param').length;
        }

        function appendParameters(params) {

            for (var param in params) {

                var html = $('template.param-tpl').html();
                html = html.replace(new RegExp('__index__', 'g'), getParamCount());

                var append = $(html);
                append.find('.param-key').val(params[param].name);
                append.find('.param-val').val(params[param].defaultValue);
                append.find('.param-desc').removeClass('hide').find('.text').html(params[param].description);

                if (params[param].required == 'true') {
                    append.find('.param-desc .param-required').removeClass('hide');
                }

                $('.param-add').before(append);
            }
        }

        $('.params').on('click', '.change-val-type', function() {
            var type = $(this).parent().prev().attr('type') == 'text' ? 'file' : 'text';
            $(this).parent().prev().attr('type', type);

            $("i", this).toggleClass("fa-upload fa-pencil");
        }).on('click', '.param-remove', function() {
            $(this).closest('.param').remove();
        });

        $('.param-add').on('focus', 'input', function() {
            var html = $('template.param-tpl').html();

            html = html.replace(new RegExp('__index__', 'g'), $('.param').length);

            $(this).closest('.param-add').before(html);

            $('.params .param').last().find('input:first').focus()
        });

        function renderResponse(response) {
            $('.response-tabs').removeClass('hide');

            $('.response-tabs #content pre code').html(response.content);
            $('.response-tabs #headers pre code').html(response.headers);
            $('.response-tabs #cookie pre code').html(response.cookies);

            $('.response-tabs pre code').removeClass(function(index, className) {
                return (className.match(/language-[^\s]+/) || []).join(' ');
            }).addClass('language-' + response.language);

            Prism.highlightAll();

            $('.response-status').html('status&nbsp;' + response.status.code + '&nbsp;&nbsp;' + response.status
                .text);

            if (response.status.code >= 400) {
                $('.response-status').removeClass(function(index, className) {
                    return (className.match(/label-[^\s]+/) || []).join(' ');
                }).addClass('label-danger');
            } else {
                $('.response-status').removeClass(function(index, className) {
                    return (className.match(/label-[^\s]+/) || []).join(' ');
                }).addClass('label-success');
            }
        }

        $('.api-tester-form').on('submit', function(event) {

            event.preventDefault();

            var formData = new FormData(this);

            if (formData.get('uri').length == 0) {
                return false;
            }

            $.ajax({
                method: 'POST',
                url: '/admin/api_imitate/handle',
                data: formData,
                async: false,
                success: function(data) {
                    if (typeof data === 'object') {
                        if (data.status) {
                            toastr.success(data.message);
                            renderResponse(data.data);
                        } else {
                            toastr.error(data.message);
                        }
                    }
                },
                cache: false,
                contentType: false,
                processData: false
            });

        });
    });

</script>
